講到網頁實作，就一定得提到網頁開發三大巨頭：

HTML、CSS、JavaScript。

• HTML : 一個網頁的骨架，建立起基本架構
• CSS : 一個網站的衣服，負責外觀設計
• JavaScript : 決定網站的動作

而今天先講HTML的部分~

首先，平常瀏覽網頁時使用的步驟如下

• 我們透過網址對遠端伺服器發出http request
• 伺服器再回傳相對應的網頁html原始碼
• 網頁遊覽器再自動地將html原始碼轉為我們看得懂的圖形化介面

這麼神奇的原始碼到底長什麼樣子，來看看平常常見的網頁的html原始碼吧。

網址前面輸入view-source:即可看到html原始碼

• 舉it邦幫忙網頁的html原始碼為例

可以看到裡面的東西，像是程式碼又不是程式碼，看似有規律又有點像亂碼。
那HTML到底是什麼呢？

• HTML(HyperText Markup Language)
  • 為一種標籤語言，利用標籤去描述網頁上文字的特性
  • HTML在網頁上的結構
    • head:放網頁的基本資料
    • title 網頁名稱
    • meta metadata
    • link CSS 樣式表
    • style CSS 樣式表
    • script JavaScript code
    • body:要編輯的網頁內容
  • 三大要素
    • 標籤 Tag:
    • 屬性 Attribute:描述標籤
    • 內容 content:看到的文字
    • <tag attribute=”something”>content</tag>
  • 標籤
    • <>將標籤名包住
    • 開始<…>;結束</…>，但不是每個標籤都有結束標籤
  • 屬性
    • 為標籤提供更多資訊，ex: 將這個區塊命名為名字
    • 型式→名稱=“值”
    • 只會出現在開始標籤中
  • 內容
    • 就是內容，顯示的部分(如顯示的文字內容等等)

接下來記載一下常用的語法，一樣以HTML三大要素個別去講

• 常見標籤

  • <font></font> :調整文字樣式

  • <u>: 底線

  • <i>: 斜體

  • <b>: 粗體

  • block元素:會佔一整行

  • 

    • <div>…</div> : 描述編輯的區域,容器

    • <h>: 字型大小 → h1 > h2 > h3

    • <p>: 分段

    • <hr>: 分割線

    • list元素

      • <ul>：unorder list，列表用點來表示
      • <ol>：order list，編號清單，用1. 2. 3. …來表示
      • <li>：list，可包或不包在<ul>，<ol>裡面，僅放資料，沒顯示任何額外的東西

  • inline元素:用多少佔多少

    • <span>

  • <a>: 超連結

  • <br>:換行

  • <form> :製作表單讓使用者填入資料

  • <table> : 表格

• 常見屬性

  • href :放超連結的網址
  • class : 說明目的

• 常見的內容

  • 沒有常見的內容啦！就是想打什麼自己決定ＸＤ

今天先講到這，我們明天見